<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI智能助手</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        :root {
            --primary-color: #6f42c1;
            --secondary-color: #007bff;
            --success-color: #20c997;
            --dark-color: #212529;
            --light-bg: #f8f9fa;
            --chat-bg: #f0f4f8;
            --user-msg: #6f42c1;
            --ai-msg: #e9ecef;
        }

        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            color: var(--dark-color);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            background: linear-gradient(135deg, var(--primary-color), #5a32a3);
            color: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 6px 15px rgba(111, 66, 193, 0.2);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .header::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            transform: rotate(30deg);
        }

        .header h1 {
            font-weight: 700;
            position: relative;
            z-index: 2;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
            position: relative;
            z-index: 2;
        }

        .mode-selector {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            margin-bottom: 25px;
        }

        .mode-btn {
            border: 2px solid #e9ecef;
            background: white;
            color: #495057;
            padding: 12px 20px;
            border-radius: 10px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .mode-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
            box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
        }

        .mode-btn:hover:not(.active) {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .chat-container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
            overflow: hidden;
            margin-bottom: 25px;
            height: 500px;
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            background: var(--primary-color);
            color: white;
            padding: 15px 20px;
            font-weight: 500;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 25px;
            background-color: var(--chat-bg);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .message {
            max-width: 80%;
            padding: 15px 20px;
            border-radius: 18px;
            position: relative;
            animation: fadeIn 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background: var(--user-msg);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }

        .ai-message {
            background: var(--ai-msg);
            color: #333;
            align-self: flex-start;
            border-bottom-left-radius: 5px;
        }

        .message-header {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: 0.85rem;
        }

        .user-message .message-header {
            color: rgba(255,255,255,0.8);
        }

        .ai-message .message-header {
            color: var(--primary-color);
        }

        .input-section {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }

        .input-group {
            display: flex;
            gap: 12px;
        }

        .input-group input {
            flex: 1;
            padding: 14px 20px;
            border: 2px solid #e9ecef;
            border-radius: 12px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .input-group input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.15);
        }

        .input-group button {
            padding: 14px 25px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .input-group button:hover:not(:disabled) {
            background: #5a32a3;
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3);
        }

        .input-group button:disabled {
            background: #adb5bd;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .loading {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--primary-color);
            font-style: italic;
        }

        .typing-indicator {
            display: flex;
            gap: 5px;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            background: var(--primary-color);
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) { animation-delay: 0s; }
        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typing {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-5px); }
        }

        .features {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .feature-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            flex: 1;
            min-width: 200px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
        }

        .feature-card i {
            font-size: 2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
        }

        .feature-card h4 {
            font-size: 1.1rem;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .input-group {
                flex-direction: column;
            }

            .message {
                max-width: 90%;
            }

            .features {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1><i class="bi bi-robot me-2"></i>AI智能助手</h1>
        <p>您的智能伙伴，随时为您提供帮助</p>
    </div>

    <div class="mode-selector">
        <div class="d-flex flex-wrap gap-3 justify-content-center">
            <button id="v1Btn" class="mode-btn active">
                <i class="bi bi-lightning me-2"></i>快速响应模式
            </button>
            <button id="v2Btn" class="mode-btn">
                <i class="bi bi-chat-dots me-2"></i>流式对话模式
            </button>
        </div>
    </div>

    <div class="chat-container">
        <div class="chat-header">
            <i class="bi bi-chat-left-dots me-2"></i>对话记录
        </div>
        <div class="chat-messages" id="chatMessages">
            <div class="message ai-message">
                <div class="message-header">
                    <i class="bi bi-robot me-1"></i>AI助手
                </div>
                <div>您好！我是您的AI智能助手，有什么我可以帮您的吗？</div>
            </div>
        </div>
    </div>

    <div class="input-section">
        <div class="input-group">
            <input type="text" id="userInput" placeholder="请输入您的问题..." autocomplete="off">
            <button id="sendBtn">
                <i class="bi bi-send me-2"></i>发送
            </button>
        </div>

        <div class="features">
            <div class="feature-card">
                <i class="bi bi-lightbulb"></i>
                <h4>智能问答</h4>
                <p class="mb-0">解答各类问题，提供专业建议</p>
            </div>
            <div class="feature-card">
                <i class="bi bi-translate"></i>
                <h4>多语言支持</h4>
                <p class="mb-0">支持中英文等多种语言</p>
            </div>
            <div class="feature-card">
                <i class="bi bi-shield-check"></i>
                <h4>安全可靠</h4>
                <p class="mb-0">保护您的隐私和数据安全</p>
            </div>
        </div>
    </div>
</div>

<script>
    let currentMode = 'v1'; // 默认使用普通模式

    $(document).ready(function() {
        // 模式切换
        $('#v1Btn').click(function() {
            currentMode = 'v1';
            $(this).addClass('active');
            $('#v2Btn').removeClass('active');
        });

        $('#v2Btn').click(function() {
            currentMode = 'v2';
            $(this).addClass('active');
            $('#v1Btn').removeClass('active');
        });

        // 发送按钮点击事件
        $('#sendBtn').click(function() {
            sendMessage();
        });

        // 回车键发送
        $('#userInput').keypress(function(e) {
            if (e.which === 13) {
                sendMessage();
            }
        });
    });

    // 发送消息
    function sendMessage() {
        const userInput = $('#userInput').val().trim();
        if (!userInput) return;

        // 显示用户消息
        appendMessage(userInput, 'user');
        $('#userInput').val('');

        // 禁用输入
        $('#sendBtn').prop('disabled', true);
        $('#userInput').prop('disabled', true);

        // 显示加载状态
        const loadingId = showLoading();

        if (currentMode === 'v1') {
            // 普通模式
            $.ajax({
                url: '/AI/v1',
                method: 'GET',
                data: { msg: userInput },
                success: function(response) {
                    hideLoading(loadingId);
                    appendMessage(response, 'ai');
                },
                error: function() {
                    hideLoading(loadingId);
                    appendMessage('抱歉，请求失败，请稍后重试。', 'ai');
                },
                complete: function() {
                    // 启用输入
                    $('#sendBtn').prop('disabled', false);
                    $('#userInput').prop('disabled', false);
                    $('#userInput').focus();
                }
            });
        } else {
            // 流式模式
            const aiMessageId = appendStreamingMessage();
            let fullResponse = '';

            const eventSource = new EventSource(`/AI/v2?msg=${encodeURIComponent(userInput)}`);

            eventSource.onmessage = function(event) {
                fullResponse += event.data;
                updateStreamingMessage(aiMessageId, fullResponse);
            };

            eventSource.onerror = function() {
                eventSource.close();
                hideLoading(loadingId);
                updateStreamingMessage(aiMessageId, fullResponse || '抱歉，请求失败，请稍后重试。');
                // 启用输入
                $('#sendBtn').prop('disabled', false);
                $('#userInput').prop('disabled', false);
                $('#userInput').focus();
            };

            eventSource.addEventListener('end', function() {
                eventSource.close();
                hideLoading(loadingId);
                // 启用输入
                $('#sendBtn').prop('disabled', false);
                $('#userInput').prop('disabled', false);
                $('#userInput').focus();
            });
        }
    }

    // 添加消息到聊天区域
    function appendMessage(content, sender) {
        const messageClass = sender === 'user' ? 'user-message' : 'ai-message';
        const senderName = sender === 'user' ? '您' : 'AI助手';
        const icon = sender === 'user' ? 'bi-person' : 'bi-robot';

        const messageDiv = $(`
                <div class="message ${messageClass}">
                    <div class="message-header">
                        <i class="bi ${icon} me-1"></i>${senderName}
                    </div>
                    <div>${content}</div>
                </div>
            `);

        $('#chatMessages').append(messageDiv);
        scrollToBottom();
        return messageDiv;
    }

    // 添加流式消息
    function appendStreamingMessage() {
        const messageDiv = $(`
                <div class="message ai-message">
                    <div class="message-header">
                        <i class="bi bi-robot me-1"></i>AI助手
                    </div>
                    <div></div>
                </div>
            `);
        $('#chatMessages').append(messageDiv);
        scrollToBottom();
        return messageDiv;
    }

    // 更新流式消息内容
    function updateStreamingMessage(messageDiv, content) {
        if (typeof messageDiv === 'string') {
            $(`#${messageDiv}`).find('div:last').text(content);
        } else {
            messageDiv.find('div:last').text(content);
        }
        scrollToBottom();
    }

    // 显示加载状态
    function showLoading() {
        const loadingId = 'loading-' + Date.now();
        const loadingDiv = $(`
                <div id="${loadingId}" class="message ai-message">
                    <div class="message-header">
                        <i class="bi bi-robot me-1"></i>AI助手
                    </div>
                    <div class="loading">
                        <div class="typing-indicator">
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                            <div class="typing-dot"></div>
                        </div>
                        <span>AI正在思考中...</span>
                    </div>
                </div>
            `);
        $('#chatMessages').append(loadingDiv);
        scrollToBottom();
        return loadingId;
    }

    // 隐藏加载状态
    function hideLoading(loadingId) {
        $(`#${loadingId}`).remove();
    }

    // 滚动到底部
    function scrollToBottom() {
        const chatMessages = $('#chatMessages');
        chatMessages.scrollTop(chatMessages[0].scrollHeight);
    }
</script>
</body>
</html>
